<!-- scaleBox + flex布局 -->

<template>
	<div>
		<!-- <div class="center">
			<div class="nav flex  ai-center  flex-4 ">
				<div class="nav-item nav-item_active">模块一</div>
				<div class="nav-item" @click="toPage('module2')">模块二</div>
				<div class="nav-item">模块三</div>
			</div>
		</div> -->
		<div class="left cover flex fd-column gap-10 my-animation-slide-right">
			<div class="title">
				<span class="tip"></span>
				<span>这是一个标题</span>
			</div>
			<div class="flex fd-column flex-1 gap-10">
				<div class="e-card flex-1">
					<radar1Chart />
				</div>
				<div class="e-card flex-1">
					<pie2Chart />
				</div>
			</div>
		</div>
		<div class="right cover flex fd-column gap-10 my-animation-slide-left">
			<div class="flex-1 flex fd-column gap-10">
				<div class="title">
					<span class="tip"></span>
					<span>这是一个标题</span>
				</div>
				<div class="e-card flex-1">
					<bar3Chart />
				</div>
			</div>
			<div class="flex-1 flex fd-column gap-10">
				<div class="title">
					<span class="tip"></span>
					<span>这是一个标题</span>
				</div>
				<div class="e-card flex-1">
					<line2Chart />
				</div>
			</div>
			<div class="flex-1 flex fd-column gap-10">
				<div class="title">
					<span class="tip"></span>
					<span>这是一个标题</span>
				</div>
				<div class="e-card flex-1">
					<bar1Chart />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import scaleScreen from "@/components/scaleScreen";

import line1Chart from "@/views/echart/lineChart/line1";
import line2Chart from "@/views/echart/lineChart/line2";
import bar1Chart from "@/views/echart/barChart/bar1";
import bar2Chart from "@/views/echart/barChart/bar2";
import bar3Chart from "@/views/echart/barChart/bar3";
import gauge1Chart from "@/views/echart/gaugeChart/gauge1";
import gauge2Chart from "@/views/echart/gaugeChart/gauge2";
import pie1Chart from "@/views/echart/PieChart/pie1";
import pie2Chart from "@/views/echart/PieChart/pie2";
import radar1Chart from "@/views/echart/radarChart/radar1";

export default {
	components: {
		scaleScreen,
		line1Chart,
		line2Chart,
		bar1Chart,
		bar2Chart,
		bar3Chart,
		gauge1Chart,
		gauge2Chart,
		pie1Chart,
		pie2Chart,
		radar1Chart,
	},
	data() {
		return {
		};
	},

	mounted() {
	},
	methods: {
		toPage(path) {
			console.log('path :>> ', path);
			this.$router.push(path)
		}
	},
};
</script>

<style scoped lang="scss">
.e-card {
	// border: 2px solid;
	// border-image: linear-gradient(to right, #917667, #578aef) 1;
	background: #1f406480;
	border-radius: 5px;
}

.title {
	height: 50px;
	padding: 10px;
	background: #1f406480;
	box-shadow: 2px 2px 4px rgba(0, 21, 41, 0.08);
	display: flex;
	align-items: center;
	border-radius: 5px;
	color: #fff;

	.tip {
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-left-color: #ffac4d;
		display: block;
	}
}

.cover {
	position: absolute;
	width: 25%;
	height: calc(100% - #{$base-header-height} - 40px);
	bottom: 20px;
}

.left {
	left: 10px;
}

.right {
	right: 10px;
}

.center {
	position: absolute;
	left: calc(25% + 10px + 20px);
	top: calc(#{$base-header-height} + 20px + 5px);

	.nav {
		padding-left: 20px;

		.nav-item {
			background: #ffd29e;
			margin: 0 10px;
			padding: 10px 30px;
			border-radius: 30px 10px;
			transition: background-color 0.3s;
			color: #fff;

			&:hover,
			&_active {
				background: #ffac4d;
			}
		}
	}
}
</style>
